<template>
  <div >
   
      <!-- 导航 -->
      <HomeNavigation></HomeNavigation>


    <!-- 搜索和图片 -->
     <SearchBox></SearchBox>
    
    <!-- 首页分类 -->
    <ClassNavigation></ClassNavigation>
  
    <!-- 首页轮播图 -->
    <div class="slider-banner banner" style="height:420px;">
      <swiper :options="swiperOption" v-if="banner.length > 0">
        <swiper-slide v-for="(item, index) in banner" :key="index">
          <router-link
            :to="item.wap_url ? item.wap_url : ''"
            class="search acea-row row-middle"
          >
            <img :src="item.pic"  style="width:100%;height:420px;" />
          </router-link>
        </swiper-slide>
    
      </swiper>
    </div> 
    
   <!-- 新品首发 -->
  <el-row class="newArruval" type="flex" justify="center">
    <el-col :span="18" style="height:55px;">
      <div class="newArruvalHead">
        <h3 class="name">新品首发</h3>
        <span class="frontName">为你寻觅世间好物</span>
      <div class="moreItems" >
        <router-link :to="{ path: '/hot_new_goods/' + 3 }"
          >更多<span class="iconfont icon-jiantou"></span
        ></router-link>
      </div>
  
    </div>
    </el-col>
  </el-row>
  <el-row  style="background-color: #F4F0EA;" type="flex" justify="center">
     <el-col :span="18" class="newArruvalBox">
       <div style="width:1090px;margin: 0  auto;">
       <el-col  v-for="(item, index) in info.firstList" :key="index"  class="newArruvalCard" :hidden="index>3">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <router-link :to="{ path: '/detail/' + item.id }">
              <div style="width: 253px;height:253px;">
                <img :src="item.image"  style="width: 253px;height:253px;" />
              </div>
              <div style="height:79px;">
              <div class="newArruvalFont">{{ item.store_name }}</div>
              <div class="newArruvalPrice">￥{{ item.price }}</div>
              </div>
            </router-link>
        </el-card>
       </el-col>
   </div>
     </el-col>
  </el-row>

  <!-- 精品推荐 -->
<el-row class="boutiqueRecommendationTitle" type="flex" justify="center">
    <el-col :span="18" style="height:45px;">
      <div class="boutiqueRecommendationHead">
      <div >
        <h3 class="name">精品推荐</h3>
        <span class="frontName">{{ info.bastInfo }}</span>
      
      <div class="moreItems" >
        <router-link :to="{ path: '/hot_new_goods/' + 1 }"
          >更多<span class="iconfont icon-jiantou"></span
        ></router-link>
      </div>
      </div>
    </div>
    </el-col>
  </el-row>

 <el-row class="boutiqueRecommendationSwiper" type="flex" justify="center">
     <el-col :span="18">
       <div style="width:1090px;margin:0 auto">
       <div class="slider-banner banner" style="height:310px;">
        <swiper :options="swiperOption" v-if="banner.length > 0">
          <swiper-slide v-for="(item, index) in banner" :key="index">
            <router-link
              :to="item.wap_url ? item.wap_url : ''"
              class="search acea-row row-middle"
            >
              <img :src="item.pic"  style="width:100%;height:310px;" />
            </router-link>
          </swiper-slide>
    
      </swiper>
    </div> 
  </div>
     </el-col>
  </el-row>  

 <el-row style="padding-top:20px;" type="flex" justify="center">
     <el-col :span="18" class="newArruvalBox">
       <div style="width:1090px;margin:0  auto;">
       <el-col  v-for="(item, index) in info.bastList" :key="index"  class="newArruvalCard" :hidden="index>3">
         <span style="width:25px;height:464px;"></span>
        <el-card :body-style="{ padding: '0px' }" shadow="hover" >
          <router-link :to="{ path: '/detail/' + item.id }">
              <div style="width: 253px;height:253px;">
                <img :src="item.image"  style="width: 253px;height:253px;" />
              </div>
              <div style="height:79px;">
              <div class="newArruvalFont">{{ item.store_name }}</div>
              <div class="newArruvalPrice">￥{{ item.price }}</div>
              </div>
            </router-link>
        </el-card>
  </el-col>
  </div>
     </el-col>
  </el-row>


<!-- 促销单品 -->
  <el-row class="promotionalItemsTitle" type="flex" justify="center">
      <el-col :span="18" style="height:45px;">
        <div class="boutiqueRecommendationHead">
        <div >
          <h3 class="name">福利社</h3>
        </div>
      </div>
      </el-col>
    </el-row>

  <el-row style="background-color:#F4F0EA;" type="flex" justify="center"> 
    <el-col :span="18" style="height:445px;">
      <div class="promotionalItemsBox acea-row">
        <div class="promotionalItemsSwiper">
           <div class="slider-banner banner" style="height:376px;">
            <swiper :options="swiperOption" v-if="banner.length > 0">
              <swiper-slide v-for="(item, index) in banner" :key="index">
                <router-link
                  :to="item.wap_url ? item.wap_url : ''"
                  class="search acea-row row-middle"
                >
                  <img :src="item.pic"  style="width:100%;height:376px;" />
                </router-link>
              </swiper-slide>
        
          </swiper>
    </div> 
        </div>
        <div class="promotionalItemsProduct" style="background-color:#fff;">
          <div class="promotionalItemsProductTitle">
              <h3 class="promotionalItemsProductTitleName">促销单品</h3>
              <span class="promotionalItemsProductTitleFrontName">{{ info.salesInfo }}</span>
                <div class="moreItems" >
                  <router-link  :to="'/promotion'"
                    >更多<span class="iconfont icon-jiantou"></span
                  ></router-link>
          </div>

          </div>
          <div class="promotionalItemsProductList acea-row">
            <div class="promotionalItemsProductItems acea-row"  v-for="(item,index) in benefit" :key="index" :hidden="index>1">
                 <router-link
                  :to="{ path: '/detail/' + item.id}">
                  <div class="image">
                  <img :src="item.image" class="image" />
                   </div>
                </router-link>
              <div class="font">
                <div class="fontTitle">{{ item.store_name }}</div>
                <div class="promotion">促销价: ￥<span style="font-weight:700;font-size:15px;">{{ item.price }}</span></div>
                <div> 
                  <div class="dailyPrice">￥{{ benefit[0].ot_price }}</div>
                </div>
                <router-link
                  :to="{ path: '/detail/' + item.id }">
                  <div class="btn">立即抢购</div>
                  </router-link>
              </div> 
            </div>
          </div>
        </div>
        <div class="promotionalItemsHot" style="background-color:#fff;">
           <div class="title">
              <h3 class="promotionalItemsProductTitleName">热门榜单</h3>
                <div class="moreItems" >
                  <router-link  :to="{ path: '/hot_new_goods/' + 2 }"
                    >更多<span class="iconfont icon-jiantou"></span
                  ></router-link>
          </div>
          </div>
             <router-link
              :to="{ path: '/detail/' + item.id }"
              v-for="(item, index) in likeInfo"
              :key="index"
            >
            <div class="product acea-row">
            <div class="image">
              <img :src="item.image"  class="image">
            </div>
            <div class="font">
               <div class="line">{{ item.store_name }}</div>
               <div class="price"> ￥<span class="num">{{ item.price }}</span></div>
            </div> 
            </div>
             </router-link>
          </div>
        </div>

    </el-col>

  </el-row>


  <Foot></Foot>

  </div>

</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";
import GoodList from "@components/GoodList";
import PromotionGood from "@components/PromotionGood";
import CouponWindow from "@components/CouponWindow";
import { getHomeData, getShare, follow } from "@api/public";
import cookie from "@utils/store/cookie";
import { openShareAll } from "@libs/wechat";
import { isWeixin } from "@utils/index";
const HAS_COUPON_WINDOW = "has_coupon_window";
import HomeNavigation from "@components/HomeNavigation";
import SearchBox from "@components/SearchBox";
import ClassNavigation from "@components/ClassNavigation";
import Foot from "@components/Foot";

export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide,
    GoodList,
    PromotionGood,
    CouponWindow,
    HomeNavigation,
    SearchBox,
    ClassNavigation,
    Foot
  },
  props: {},
  data: function() {
    return {
      followUrl: "",
      subscribe: false,
      followHid: true,
      followCode: false,
      showCoupon: false,
      logoUrl: "",
      banner: [],
      menus: [],
      roll: [],
      activity: [],
      activityOne: {},
      info: {
        fastList: [],
        bastBanner: [],
        firstList: [],
        bastList: []
      },
      likeInfo: [],
      lovely: [],
      benefit: [],
      couponList: [],
      swiperOption: {
        pagination: {
          el: ".paginationBanner",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperRoll: {
        direction: "vertical",
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperScroll: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      swiperBoutique: {
        pagination: {
          el: ".paginationBoutique",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperProducts: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      }
    };
  },
  mounted: function() {
    let that = this;
    getHomeData().then(res => {
      that.logoUrl = res.data.logoUrl;
      that.$set(that, "banner", res.data.banner);
      that.$set(that, "menus", res.data.menus);
      that.$set(that, "roll", res.data.roll);
      that.$set(that, "activity", res.data.activity);
      if (res.data.activity.length) {
        var activityOne = res.data.activity.shift();
        that.$set(that, "activityOne", activityOne);
      }
      that.$set(that, "info", res.data.info);
      that.$set(that, "likeInfo", res.data.likeInfo);
      that.$set(
        that,
        "lovely",
        res.data.lovely.length ? res.data.lovely[0] : {}
      );
      that.$set(that, "benefit", res.data.benefit);
      that.$set(that, "couponList", res.data.couponList);
      that.subscribe = res.data.subscribe;
      that.setOpenShare();
      this.showCoupon =
        !cookie.has(HAS_COUPON_WINDOW) &&
        res.data.couponList.some(coupon => coupon.is_use);
    });
    // this.getFollow();
  },
  methods: {
    closeFollow() {
      this.followHid = false;
    },
    followTap() {
      this.followCode = true;
      this.followHid = false;
    },
    submit() {
      this.followCode = true;
      this.followHid = false;
    },
    closeFollowCode() {
      this.followCode = false;
      this.followHid = true;
    },
    couponClose() {
      cookie.set(HAS_COUPON_WINDOW, 1);
    },
    getFollow() {
      follow()
        .then(res => {
          this.followUrl = res.data.path;
        })
        .catch(() => {});
    },
    setOpenShare() {
      if (isWeixin()) {
        getShare().then(res => {
          var data = res.data.data;
          var configAppMessage = {
            desc: data.synopsis,
            title: data.title,
            link: location.href,
            imgUrl: data.img
          };
          openShareAll(configAppMessage);
        });
      }
    }
  }
};
</script>
<style scoped>
.classify {
  margin:0 auto;
  width:1090px;
  height: 25px;
}

.classify  ul {
  height: 25px;
  position: relative;
}

.classify  ul li {
  display: inline-block;
  
}
.classify  ul li span{
  font-size: 14px;
  font-family: "Microsoft Yahei","微软雅黑",verdana;
  line-height: 25px;
  font-weight: 700;
  margin: 0 26px;
  padding-bottom: 3px;
}

.classify ul  li .title {
  height: 25px;
  
}
.classify  ul li span:hover  {
  border-bottom:4px   solid   #CC9756;
  color: #CC9756;
}

.classify ul  li .item {
padding: 0  26px;
padding-bottom: 7px;
}
.show-warp{
  display:none;
  position: absolute;
  left: 0px;
  top: 35px;;
  width: 1090px;
  height: 180px;;
  background-color: #d4282d;
  z-index: 99999999;
}
.classify  .item:hover .show-warp {
 display: block;
}


.index {
  background-color: #fff;
}
.index .follow {
  z-index: 100000;
}
.frontName{
    padding-top: 13px;
    display: inline-block;
    line-height: 1;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
}
.promotionalItemsProductTitleFrontName {
    padding-top: 23px;
    display: inline-block;
    line-height: 1;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;

}

  .moreItems {
    display: inline-block;
    position: absolute;
    right:0;
    line-height: 1;
    margin-left: 30px;
    padding-top: 14px;
    cursor: pointer;
    padding-left: 20%;
}
.menu{
  height:300px;
  width:58%;
  margin: -45px 20%;

}
.newArruval  {
  background-color: #F4F0EA;
}
.name {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    float: left;
    margin-right: 20px;
}
.newArruvalHead {
  width: 1090px;
  margin: 0 auto;
}
.newArruvalHead,.boutiqueRecommendationHead {
  width: 1090px;
  position: relative;
  margin: 0 auto;
}

.newArruvalBox{
  height:464px;
  
}
.newArruvalCard {
  width: 265px;
  height:365px;
  padding:0 5px;
  margin: 0 3px;
}
.newArruvalFont {
  width:253px;
  height: 37px;
  line-height: 37px;
  color: #333;
  text-align: center;
  font-size: 13px;
  font-family: "Microsoft Yahei","微软雅黑",verdana;
  font-weight: bold;
  margin: 20px auto 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding:0 5px ;
}
.newArruvalPrice {
    line-height: 13px;
    height: 13px;
    padding: 0;
    color: #d4282d;
    font-size: 13px;
   text-align: center;
  padding: 5px 0 20px;
}


.boutiqueRecommendationTitle{
  height:45px;
  padding: 50px 0;
}
.promotionalItemsTitle {
   height:45px;
  padding: 50px 0;
  background-color: #F4F0EA;
}
.promotionalItemsBox {
  width:1090px;
  height:376px;
  margin:0 auto;
}
.promotionalItemsSwiper {
  width: 224px;
  height:376px;
 
}
.promotionalItemsProduct {
  height:376px;
  width: 624px;
 
}
.promotionalItemsProductList {
  width: 608px;
  height: 300px;
  margin: 20px auto 0;
  overflow: hidden;
}
.promotionalItemsProductItems {
  width: 284px;
  height: 130px;
  margin: 0px  20px 20px 0px;
}
.promotionalItemsProductItems .image {
  width: 130px;
  height: 130px;
}
.promotionalItemsProductItems .image img {
  width: 100%;
}
.promotionalItemsProductItems  .font{
  margin-left: 10px;
}

.promotionalItemsProductItems  .font .promotion {
  font-size: 14px;
  font-family: "Microsoft Yahei","微软雅黑",verdana;
  color: #d4282d;
}
.promotionalItemsProductItems  .font  .dailyPrice{
    margin-top: 2px;
    font-size: 14px;
    color: #A4A4A4;
    line-height: 1.1;
    text-decoration:line-through;
}
.promotionalItemsProductItems  .font  .btn{
  margin-top: 10px;
    bottom: 8px;
    width: 90px;
    line-height: 26px;
    text-align: center;
    background-color: #BE4141;
    border: 1px solid #D25A5A;
    border-radius: 2px;
    color: #fff;
}
.promotionalItemsProductTitle {
  width: 588px;
  height: 56px;
  margin: 0 auto;
  border-bottom:1px solid  #F4F0EA;
  position: relative;

}
.promotionalItemsHot {
  width: 242px;
  height:376px;
  border-left: 1px solid  #F4F0EA;

}
.promotionalItemsHot .title {
  width: 188px;
  height: 56px;
  margin: 0 auto;
  border-bottom:1px solid  #F4F0EA;
  position: relative;
}
.promotionalItemsHot .product {
  width: 200px;
  height: 100px;
  margin: 5px auto 0;
}
.promotionalItemsHot .product  .image {
  width: 100px;
  height: 100px;
}

.promotionalItemsHot .product .font {
  width: 100px;
  height: 100px;
  text-align: center;
}
 .promotionalItemsHot .product .font .line {
       color: #333;
       overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    line-height: 1.1;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 12x;
    -webkit-line-clamp: 2;
 }


  .promotionalItemsHot .product .font .price {
    padding-left: 10px;
    color: #d4282d;
  }
.fontTitle  {
    max-width: 130px;
    max-height: 40px;
    overflow: hidden;
    margin-top: 15px;
    font-size: 14px;
    line-height: 20px;
}
.promotionalItemsProductTitleName {
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 16px;
    line-height: 1;
    float: left;
    margin-right: 20px;
    padding-top: 20px;
}

</style>
